<!--  -->
<template>
  <div class="login-container">
    <div class="login-logo">博客管理后台</div>
    <el-form class="login-form"
             ref="login-form"
             :model="user"
             :rules="formRules">
      <el-form-item prop="mobile">
        <el-input v-model="user.mobile"
                  placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input v-model="user.code"
                  placeholder="请输入密码"></el-input>
      </el-form-item>
      <el-form-item prop="agree">
        <el-checkbox v-model="user.agree">我已阅读并同意用户协议和隐私政策</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"
                   class="login-btn"
                   :loading="lginLoading"
                   @click="onLogin"
                   >登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { login } from '@/api/user'
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data () {
    return {
      user: {
        mobile: '13911111111',
        code: '246810',
        agree: false
      },
      checked: true,
      lginLoading: false,
      formRules: { // 验证规则
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'change' },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的手机号', trigger: 'change' }
        ],
        code: [
          { required: true, message: '验证码不能为空', trigger: 'change' },
          { pattern: /^\d{6}$/, message: '验证码长度为6位数字', trigger: 'change' }
        ],
        agree: [
          {
            validator: (rule, value, callback) => {
              if (value) {
                callback()
              }
              callback(new Error('请勾选用户协议'))
            },
            // message: '手机号不能为空',
            trigger: 'change'
          }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created () { },
  mounted () { },
  methods: {
    onLogin () {
      // 表单校验规则验证
      this.$refs['login-form'].validate((valid, err) => {
        // console.log(valid)
        if (!valid) {
          return
        }
        // 调用登录接口
        this.login()
      })
    },
    login () {
      this.lginLoading = true
      // 发送请求
      login(this.user).then(res => {
        console.log(res)
        this.$message({
          message: '登录成功',
          type: 'success'
        })
        this.lginLoading = false
        // 将接口返回的token存入本地存储数据
        window.localStorage.setItem('user', JSON.stringify(res.data.data))
        this.$router.push({
          name: 'home'
        })
      }).catch(err => {
        this.$message.error('登录失败,请重新登录')
        console.log('登陆失败', err)
        this.lginLoading = false
      })
    }
  }
}
</script>

<style lang='less' scoped>
.login-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("./login_bg.jpg") no-repeat;
  background-size: cover;
  .login-logo {
    width: 300px;
    height: 57px;
    margin-bottom: 30px;
  }
  .login-form {
    background-color: #fff;
    padding: 50px;
    min-width: 300px;
    .login-btn {
      width: 100%;
    }
  }
}
</style>
